<template>
  <div class="main">
    <button @click="drawCircleArea">绘制圆形区域</button>
    <button @click="drawParallelogramArea">绘制平行四边形区域</button>
    <button @click="drawSquareArea">绘制正方形区域</button>
    <button @click="drawCylinderArea">绘制圆柱区域</button>
    <button @click="drawPipelineTrack">绘制三维管道轨迹</button>
    <button @click="drawRectangularPipelineTrack">绘制长方体管道</button>
    <button @click="drawLinePath">绘制折线轨迹</button>
    <button @click="toggleGridVisibility">切换网格显示</button> <!-- 新添加的按钮 -->
    <button @click="toggleGridLineMode">切换线框模式</button>
    <div id="cesiumContainer"></div>
  </div>
</template>


<script>
import axios from 'axios';
import { drawCircleArea, drawParallelogramArea, drawSquareArea } from '@/utils/draw2DShapes.js';
import { drawCylinderArea } from '@/utils/draw3DShapes.js';
import { draw3DPipelineTrack, draw3DRectangularPipelineTrack } from '@/utils/drawPipeline.js';
import { drawLine } from '@/utils/drawPath.js';

export default {
  data() {
    return {
      viewer: null,
      gridVisible: true, // 初始网格显示状态
    };
  },
  mounted() {
    this.initializeCesium();
  },
  methods: {
    async initializeCesium() {
      try {

        // 初始化 Cesium Viewer
        const xmap = new Xmap.Viewer('cesiumContainer');

        // 使用 Fly 操作将相机飞行到指定位置
        Xmap.Operates.Fly.camaraFlyToPosition({
          lng: 120,
          lat: 20,
          height: 10000
        }, null, 0);

        // 1. 默认动态显示图层接口
        Xmap.AirspaceManage.HierarchicalGrid.ShowGridsWithLevelDynamic();


        // //  3.  经纬度高度与网格编码转换
        // const griddingNumber = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(2, 113, 45, 15);
        // console.log(griddingNumber);
        // const llh = Xmap.AirspaceManage.HierarchicalGrid.CodingToBLH('VKJA101');
        // console.log(llh);


        // // 4. 实现网格的线框模式
        // Xmap.AirspaceManage.HierarchicalGrid.WireframeForLevelGrids(2, true);

        // // 5. 控制单个网格的显隐状态
        // Xmap.AirspaceManage.HierarchicalGrid.SetStyleForSingleGrid('VKJA101', { r: 100 / 255, g: 100 / 255, b: 100 / 255, a: 1 }, true);

        // // 7. 各层级网格编码计算与显示
        // Xmap.AirspaceManage.HierarchicalGrid.CodeVisibleForLevelGrids(2, false);

        // // 8. 根据城市模型生成其覆盖的网格范围并显示
        // Xmap.AirspaceManage.HierarchicalGrid.loadCityGrids({
        //   B: 34.45,
        //   L: 112.3,
        //   height: 234
        // }, 2);
        // // 11.鼠标框选网格后返回所有框选的网格编号
        // Xmap.AirspaceManage.HierarchicalGrid.AddGeographic('Cylinder', { r: 100 / 255, g: 100 / 255, b: 100 / 255, a: 0.6 });
        // this.viewer = new Cesium.Viewer('cesiumContainer', {
        //   sceneModePicker: false,
        //   baseLayerPicker: false,
        //   geocoder: false,
        //   homeButton: false,
        //   navigationHelpButton: false,
        //   infoBox: false,
        //   timeline: false,
        //   animation: false
        // });
        // this.viewer.scene.frameState.creditDisplay.container.style.display = 'none';

        // // 设置初始相机视图
        // this.viewer.camera.setView({
        //   destination: Cesium.Cartesian3.fromDegrees(113.5, 22.1, 10000)
        // });

      } catch (error) {
        console.error('Cesium initialization failed:', error);
      }
    },

    // 绘制圆形区域
    drawCircleArea() {
      drawCircleArea(this.viewer, 113.5, 22.05, 5000, 'BLUE', 0.5); // 圆心在113.5, 22.05，半径为5000米
      this.viewer.zoomTo(this.viewer.entities); // 缩放到圆形区域
    },

    // 绘制平行四边形区域
    drawParallelogramArea() {
      const positions = [113.3, 22.0, 113.4, 22.0, 113.45, 22.1, 113.35, 22.1]; // 平行四边形顶点
      drawParallelogramArea(this.viewer, positions, 'RED', 0.5); // 绘制平行四边形区域
      this.viewer.zoomTo(this.viewer.entities); // 缩放到平行四边形区域
    },

    // 绘制正方形区域
    drawSquareArea() {
      drawSquareArea(this.viewer, 113.5, 22.05, 10000, 'GREEN', 0.5); // 绘制中心在113.5, 22.05的正方形，边长为10000米
      this.viewer.zoomTo(this.viewer.entities); // 缩放到正方形区域
    },

    // 绘制圆柱区域
    drawCylinderArea() {
      drawCylinderArea(this.viewer, 113.5, 22.1, 3000, 1000, 'YELLOW', 0.5); // 圆柱中心在113.5, 22.1，高度为3000米，半径为1000米
      this.viewer.zoomTo(this.viewer.entities); // 缩放到圆柱区域
    },

    // 绘制三维圆柱管道轨迹
    drawPipelineTrack() {
      const positions = [113.5, 22.3, 500, 113.55, 22.35, 3000, 113.6, 22.4, 500]; // 三段位置（起点 -> 高点 -> 终点）
      const radii = [50, 100, 150]; // 每段不同的半径，分别为50米、100米、150米

      draw3DPipelineTrack(this.viewer, positions, radii, 'YELLOW'); // 绘制每段不同半径的三维圆柱形管道
      this.viewer.zoomTo(this.viewer.entities); // 缩放到管道视图
    },


    // 绘制长方体管道
    drawRectangularPipelineTrack() {
      // 调整位置：确保与圆柱管道位置不同
      const positions = [113.5, 22.1, 500, 113.55, 22.15, 3000, 113.6, 22.2, 500]; // 起点 -> 高点 -> 终点
      const sizes = [[100, 50], [150, 80], [200, 100]]; // 每段不同的宽高
      draw3DRectangularPipelineTrack(this.viewer, positions, sizes, 'YELLOW'); // 绘制长方体形管道
      this.viewer.zoomTo(this.viewer.entities); // 缩放到管道视图
    },

    // 绘制折线轨迹
    drawLinePath() {
      const positions = [113.4, 22.1, 113.45, 22.15, 113.5, 22.2, 113.55, 22.15, 113.6, 22.1]; // 多段折线
      drawLine(this.viewer, positions, 'RED', '折线轨迹'); // 绘制红色折线
      this.viewer.zoomTo(this.viewer.entities); // 缩放到折线轨迹
    },

    toggleGridVisibility() {
      const payload = {
        gridshow: true, // 或者根据需要设置为 false
        level: 1 // 设置需要控制的层级
      };

      axios.post('/showGrids', payload)
        .then(response => {
          console.log('响应:', response.data);
          // 处理响应数据，例如更新组件状态或显示通知
        })
        .catch(error => {
          console.error('调用显示控制接口失败:', error);
          // 处理错误情况
        });
    },
    toggleGridLineMode() {
      this.isLineMode = !this.isLineMode; // 切换状态
      axios.post('/GridsLineMode', { isBoolean: this.isLineMode })
        .then(response => {
          console.log('线框模式已切换:', response.data.isBoolean); // 处理响应
          this.isLineMode = response.data.isBoolean; // 根据后端返回的确切状态更新
        })
        .catch(error => {
          console.error('调用线框模式接口失败:', error);
        });
    }
  },
};


</script>
